<template>
  <div id="CreatSelect">
    <div class="padding-md">
      <p class="text-size-lg" >请选择考试时间</p>
      <p class="gray">CET考试时间定于每年6月和12月的第三个星期六</p>
      <p class="text-size-md title">2017年</p>
      <p class="text-gray text-size-md-sm">选择其它的考试时间</p>
      <ul class="time">
        <li><div class="radiolg active" @click="dateActive('2017-06-17')" height="100px" id="2017-06-17">2017/6/17</div></li>
        <li><div class="radiolg" @click="dateActive('2017-12-16')" height="100px" id="2017-12-16">2017/12/16</div></li>
      </ul>
      <p class="text-size-md title">预留备考时间</p>
      <p class="text-gray text-size-md-sm">设置考试前多少时间完成单词计划</p>
      <ul class="day">
        <li><div class="radiomd" @click="dayActive('90')"  id="90">90天</div></li>
        <li><div class="radiomd" @click="dayActive('60')"  id="60">60天</div></li>
        <li><div class="radiomd active" @click="dayActive('30')"  id="30">30天</div></li>
      </ul>
    </div>
    <div class="button-group">
      <!--<div>-->
      <!--<countdown smallTitle="THE COUNTDOWN TO CET" bigTitle="360 DAY" ></countdown>-->
      <nav-btn @click.native="toCreatSelect" text="开始吧" position="relative" backgroundName="orange"></nav-btn>
      <!--</div>-->
    </div>
  </div>
</template>

<script>
  import countdown from '../components/countdown.vue'
  import navBtn from '../components/nav-btn.vue'
  export default{
    name:'CreatSelect',//主要用来找错
    components:{navBtn},
    methods:{
      toCreatSelect:function(){
        this.$router.push({path:'/creatFinsh'})
      },
      dateActive:function(id){
        var obj = document.getElementsByClassName('radiolg');
        let radiolg=document.getElementsByClassName("radiolg");
        for(let i=0;i<radiolg.length;i++){
          radiolg[i].className='radiolg'
        }
        document.getElementById(id).className="radiolg active"
        this.$parent.examTime = id;
        console.log(this);
        console.log(this.$parent);
      },
      dayActive:function(id){
        let obj = document.getElementsByClassName('radiomd');
        let radiomd=document.getElementsByClassName("radiomd");
        for(let i=0;i<radiomd.length;i++){
          radiomd[i].className='radiomd'
        }
        document.getElementById(id).className="radiomd active"
        this.$parent.preExamDay = parseInt(id);
        console.log(this.$parent)
      }
    },
    mounted:function(){
    //   设置考试时间的高度
      let  width=document.getElementById('2017-06-17').offsetWidth;
      let radiolg=document.getElementsByClassName("radiolg");
      for(let i=0;i<radiolg.length;i++){
        radiolg[i].style.height=width-2+'px';
      }
    //  设置单词计划天数的高度
      let dayWidth = document.getElementById('90').offsetWidth;
      let radiomd = document.getElementsByClassName('radiomd');
      for(let i=0;i<radiomd.length;i++){
        radiomd[i].style.height = dayWidth-2+'px';
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../assets/css/variables.less';
  /*#creat{*/
  /*background:@orange;*/
  /*}*/
  #CreatSelect{
    /*background:#eee;*/
  }
  .selectTime{font-size:20px;}
  p{margin-bottom:10px;line-height:1.5em;}
  .button-group{
    /*background:#eee;*/
    width:100%;
    margin: 0 auto;
    /*position: fixed;*/
    /*bottom:10px;*/
    text-align: center;

  }
  p.title{
    margin-top:20px;
  }
  p.text-gray{
    margin-top:-10px;
  }
  ul.time,ul.day{
    width:100%;
    display: inline-flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
  }
  ul.time li,ul.day li{
    width:100%;
  }
  div.radiolg,div.radiomd{
    display: flex;
    justify-content: center;
    align-items: center;
    width:85%;
    margin:10px;
    border-radius: 4px;
    flex: 1;
    vertical-align: middle;
    border:1px solid @green;
  }
  .active{
    background:@green;
    color:@white;
  }
</style>
